<template>
    <div class="comment">
        <!-- 添加或修改topic对话框 -->
        <el-dialog  :visible.sync="open" width="700px"  append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="帖子内容" >
                    <!--                        <editor v-model="form.content" :min-height="192"/>-->
                    <el-input v-model="form.content" placeholder="请输入帖子内容" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <div class="zong">
            <div class="userChild">
                <router-link :to="{name:'yonghuxinxichaxun',
                                 query:{id:comment.topic.userId
                                 }}">
                <img :src="comment.topic.avatar" style="width:50px; height:50px" >
                <div style="font-size: 15px" > {{comment.topic.userName}}</div>

                </router-link>
            </div>
            <div class="topiccontent" >
                <div v-html="comment.topic.content"></div>
                <div style="margin-top: 38px ; color: #888888 ; font-size: 8px">
                    {{comment.topic.time}}
                </div>
            </div>


        </div>

        <el-link  target="_blank" @click="updateStatus()" style="float: right"
                 v-if="comment.child && comment.child.length">{{anniu}}</el-link>
        <div class="huifuanniu">
            <el-link  target="_blank"   @click="updateStatus1(comment.topic.id)" style="float: right">
                <div style="margin-right: 10px ">
                    我也说一句
                </div>
            </el-link>
        </div>
        <div v-if="open1">
            <div class="huifukuan">
                <div  class="huifukuan1">
                    <el-form ref="form1" :model="form1" :rules="rules" label-width="80px">
                        <el-form-item >
                            <el-input type="textarea" v-model="form1.content" :min-height="50"/>
                        </el-form-item>
                    </el-form>
                </div>
                <el-button type="primary" size="mini" style="float: right; margin-top: 2px" @click="submitForm1">发表</el-button>
            </div>
        </div>
        <CommentList
            v-show="showCommentDetail"
            v-if="comment.child && comment.child.length"
            :comments="comment.child"
        />
    </div>
</template>

<script>

const CommentList = () => import("./CommentList.vue"); //异步加载组件引入解决循环引用问题

export default {
    name: "CommentItem",
    inject: ['reload'],
    components: {
        CommentList,
    },
    data() {
        return {
            showCommentDetail: false,
            anniu: '查看回复',
            // 是否显示修改弹出层
            open: false,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            },
            open1: false,
            // 表单参数
            form1:{
                fatherId:'',
                content:''
            },
        };
    },
    props: {
        comment: {
            type: Object,
            default: () => {},
        },
    },
    methods: {
        updateStatus(){
            this.showCommentDetail = !this.showCommentDetail;
            if(this.showCommentDetail){
                this.anniu="收起回复";
            }else{
                this.anniu="查看回复";
            }
        },
        updateStatus1(topicId){
            console.log(topicId);
            this.open1 = !this.open;
            this.form1.fatherId = topicId;
        },
        // 表单重置
        reset() {
            this.form = {
                content: null,
            };
            // this.$refs['form'].resetFields();
            // this.resetForm("form");
        },
        /** 修改按钮操作 */
        handleUpdate(id) {
            this.reset();
            const token = sessionStorage.getItem("token");
            this.$http.defaults.headers.common['Authorization'] = token;
            this.$http.get('topic/'+ id).then(response => {
                console.log(response.data.data.data);
                this.form = response.data.data.data.topic;
                this.open = true;
                this.title = "修改帖子";
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 发表按钮 */
        submitForm1() {
            console.log(this.form1);
            if (this.form1.fatherId != null) {
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                console.log(this.form1)
                this.$http.post('topic', this.form1).then(response => {
                    if (response.data.code === 200) {
                        this.$message({showClose: true, message: "发表成功", type: "success"})
                        this.open1 = false;
                        this.reload();
                    }
                });
            }
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        const token = sessionStorage.getItem("token");
                        this.$http.defaults.headers.common['Authorization'] = token;
                        this.$http.put('topic',this.form).then(response => {
                            if (response.data.code === 200) {
                                this.$message({showClose: true, message: "修改成功", type: "success"})
                                this.open = false;
                            }
                        });
                    } else {
                        const token = sessionStorage.getItem("token");
                        this.$http.defaults.headers.common['Authorization'] = token;
                        this.$http.post('topic',this.form).then(response => {
                            if (response.data.code === 200) {
                                this.$message({ showClose: true, message: "新增成功", type: "success" })
                                this.open = false;
                            }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(id) {
            this.$confirm('是否确认删除topic编号为"' + id + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                this.$http.delete(`topic/`+id).then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: response.data.code
                        });
                    }
                });
            }).catch(() => {

            });
        },
    },
    mounted() {},
};
</script>

 Add "scoped" attribute to limit CSS to this component only
<style scoped lang="scss">
.comment {
    margin: 20px;
}
.head {
    color: #aca9a9;
    span {
        cursor: pointer;
    }
}
.userChild{
    width: 10%;
}
.topiccontent{
    width: 90%;
}
.zong{
    display: flex;
    border: #FAFAD2 solid 2px;
    background-color: #FFFFE0;
    width: 100%;
    height: 10%;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 80px;
}
.huifuanniu{
    width: 100%;
    height: 25px;
}
</style>
